<template>
    <a-layout>
        <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
            <div class="logo" />
            <a-menu
                    theme="dark"
                    mode="horizontal"
                    v-model:selectedKeys="selectedKeys"
                    :style="{ lineHeight: '64px' }"
            >
            </a-menu>
        </a-layout-header>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
            <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">
                <div id="code"><canvas id="canvas"></canvas></div>
                <div v-html="html" id="payhtml"></div>
                <div class="components-input-demo-presuffix">
                    <p>{{payInfo.orderId}}</p>
                    <a-input prefix="￥" suffix="RMB" id="price"  v-model:value="payInfo.decimal"  style="width: 200px" />
                    <p>{{payInfo.decimal}}</p>
                    <p v-show="ModalVisible">{{payInfoResp.orderNo}} 在{{payInfoResp.updateTime}} {{payInfoResp.platformStatus}}。。。。</p>
                </div>

                <br>
                <br>
                <a-button @click="createQr('WXPAY_NATIVE',payInfo.orderId,payInfo.decimal)">微信支付</a-button>
                <a-button @click="createQr('ALIPAY_PC',payInfo.orderId,payInfo.decimal)">支付宝支付</a-button>
                <br>
                <br>
                <p>
                    请长按上方二维码识别...
                </p>
            </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
</template>

<script lang="ts">
    import { defineComponent, ref ,onMounted} from 'vue';
    import {message} from "ant-design-vue";
    import axios from 'axios';
    import QRCode from "qrcode";
    import {Tool} from '@/utils/tool';
    export default defineComponent({
        name: 'HelloWorld',
        props: {
            msg: String,
        },

        setup: function () {
            let qrcode: any;
            const payResponse = ref();
            payResponse.value = {};
            const param = ref();
            param.value = {};
            //用来保存支付信息
            let payInfo = ref();
            let html = ref();
            payInfo.value = {
                orderId: "",
                orderAmount: "",
                bestPayTypeEnum: ""
            };
            //用来保存后端轮询数据
            let payInfoResp =ref();
            payInfoResp.value = {
                orderNo: "",
                updateTime: "",
                platformStatus: ""
            };
            /* 用于进行控制支付成功通知信息
             */
            const ModalVisible = ref(false);

            /**
             * 根据url生成二维码
             * @param url
             */
            const createQrcode = (url :any) => {
                const canvas = document.getElementById('canvas');
                const text = url;
                QRCode.toCanvas(canvas, text, function (error) {
                    if (error) console.error(error);
                    console.log('QRCode success!');
                });
            };
            const modalLoading = ref(false);
            /**
             *  axios 去后端接口请求 PayResons
             *  根据传入的id值来调用是微信还是支付宝支付
             */
            const createQr = (paytype :any,orderId :any,price :number) => {
                ModalVisible.value=false;
                payInfo.value.bestPayTypeEnum = paytype;
                console.log("orderId",orderId);
                console.log("price",price);
                const uuid :any= Tool.uuid_16(16);
                payInfo.value.orderId = uuid;
                payInfo.value.orderAmount=price;
                console.log(payInfo);
                axios.post("http://imooc-mall123.natapp1.cc/pay/create",payInfo.value).then((response) => {
                    console.log("payInfo",payInfo.value);
                    const data = response.data;
                    modalLoading.value = true;
                    if (data.success) {
                        modalLoading.value= false;
                        payResponse.value = data.content;
                        getPayInfo();
                        if (paytype == "WXPAY_NATIVE"){
                            createQrcode(payResponse.value.codeUrl);
                        } else if (paytype == "ALIPAY_PC") {
                            const payUrl=  payResponse.value.body;
                            if (payUrl == null) {
                                return;
                            }
                            var obj= document.querySelector('body');
                            if (obj != null){
                                obj.innerHTML = payUrl;
                                document.forms[0].submit();
                            }
                        }
                    } else {
                        message.error(data.message);
                    }
                });
            };
            /*  axios 去后端接口请求定时轮询
             *
             */
            const getPayInfo = () => {
                setInterval(function () {
                    console.log("开始轮询")
                    axios.get("http://imooc-mall123.natapp1.cc/pay/queryByOrderId/"+payInfo.value.orderId).then((response) => {
                        const data = response.data;
                        if (data.success) {
                            let mallPayInfo :any;
                            mallPayInfo = data.content;
                            if (mallPayInfo.orderNo != null && mallPayInfo.updateTime != null){
                                payInfoResp.value.orderNo = mallPayInfo.orderNo;
                                payInfoResp.value.updateTime = mallPayInfo.updateTime;
                                if (mallPayInfo.platformStatus === "NOTPAY"){
                                    payInfoResp.value.platformStatus="发起了支付"
                                }
                                if (mallPayInfo.platformStatus === "SUCCESS") {
                                    payInfoResp.value.platformStatus="支付成功"
                                }
                                ModalVisible.value=true;
                            }
                        }
                    });
                },1000);
            };

            onMounted(() => {
            });

            return {
                payInfo,
                payInfoResp,
                ModalVisible,
                getPayInfo,
                createQr,
                createQrcode,
                QRCode,
                html,
                modalLoading
            }
        }
    });
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    #components-layout-demo-fixed .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 24px 16px 0;
        float: left;
    }
    .site-layout .site-layout-background {
        background: #fff;
    }

    [data-theme='dark'] .site-layout .site-layout-background {
        background: #141414;
    }
</style>